<template>
  <div>
    <el-card>
      <h2>{{ restaurant.name }}</h2>
      <img class='tmp' :src="restaurant.image" alt="餐厅图片"/>
      <el-rate v-model="restaurant.rating" disabled></el-rate>
      <el-table :data="restaurant.dishes">
        <el-table-column prop="name" label="菜品名称"/>
        <el-table-column prop="price" label="价格"/>
        <el-table-column prop="image" label="图片">
          <template #default="scope">
            <img :src="scope.row.image" alt="菜品图片" style="width: 50px; height: 50px;"/>
          </template>
        </el-table-column>
      </el-table>

      <p>用户评价</p>
      <el-button @click="goBack">返回餐厅列表</el-button>
    </el-card>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import {getRestaurantDetail} from "@/api/restaurant/index";
// import request from "@/utils/request.ts";


const route = useRoute();
const router = useRouter();
const restaurant = ref({
  name: '',
  image: '',
  dishes: [],
  rating: 0
});

onMounted(() => {
  console.log('路由参数：', route.params);
  const restaurantId = route.params.id;
  // 模拟获取餐厅数据
  getRestaurantDataById(restaurantId);
});
const getRestaurantDataById = async (id) => {
  const res = await getRestaurantDetail(id);
  console.log('getRestaurantDataById', res);
  restaurant.value = res.data;
}
// function getRestaurantDataById(id) {
//   // 替换为实际的数据获取逻辑
//   request.get('/restaurants/'+id).then((res) => {
//     console.log('/restaurants/'+id, res);
//     restaurant.value = res.data;
//   });
// }

function goBack() {
  router.push('/restaurants');
}


</script>
<style>
.tmp {
  width: 100px;
  height: 100px;
}
</style>